import React, { useEffect, useState } from 'react';
import {
  Space,
  Table,
  Tag,
  Button,
  Checkbox,
  Form,
  Input,
  Modal,
  Popconfirm,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { getPeoplelist } from '@/api/getToutist';
import './index.css';
import { addTable } from '@/pages/hoc/table.js';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const People = (props: any) => {
  let { data, count } = props;
  const [id, setId] = useState('');
  const [newData, setNewData] = useState([]);
  const [title, setTitle] = useState('编辑');
  const [form] = Form.useForm();
  useEffect(() => {
    setNewData(props.data);
  }, [props.data]);
  // 编辑
  const edit = (item: any) => {
    // 打开弹框
    showModal();
    console.log(item);
    // 我要编辑的id
    setId(item.kefu_id);
    setTitle('编辑');
    // 数据回显
    form.setFieldsValue({ username: item.kefu_name });
  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
    if (title === '添加') {
      props.addList(values.username);
    } else {
      props.change(id, values.username);
    }

    // 关闭弹窗
    setIsModalOpen(false);
  };

  const [isModalOpen, setIsModalOpen] = useState(false);

  // 打开弹窗的方法
  const showModal = () => {
    setIsModalOpen(true);
  };

  // 删除
  const cancel = () => {};
  const confirm = (item: any) => {
    console.log(item);
    props.del(item.kefu_id);
  };

  // 添加
  const add = () => {
    showModal();
    setTitle('添加');
    form.setFieldsValue({ username: '' });
  };
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'kefu_id',
      key: 'kefu_id',
    },
    {
      title: '客服编码',
      dataIndex: 'kefu_code',
      key: 'kefu_code',
    },
    {
      title: '客服名称',
      dataIndex: 'kefu_name',
      key: 'kefu_name',
    },
    {
      title: '客服头像',
      dataIndex: 'kefu_avatar',
      key: 'kefu_avatar',
      render: (item) => {
        return (
          <img
            className="kehu-img"
            src={`http://fangadmin.shbwyz.com${item}`}
            alt=""
          />
        );
      },
    },
    {
      title: '在线状态',
      dataIndex: 'online_status',
      key: 'online_status',
      render: (item) => {
        return (
          <>
            {item === 1 ? (
              <Tag color="#87d068">在线</Tag>
            ) : (
              <Tag color="#f50">离线</Tag>
            )}
          </>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '操作',
      dataIndex: 'end_date',
      key: 'end_date',
      render: (_, record) => {
        // console.log(record, 're');
        return (
          <Space size="middle">
            <Tag color="green-inverse" onClick={() => edit(record)}>
              编辑
            </Tag>
            <Tag color="orange">修改密码</Tag>
            <Popconfirm
              title="Delete the task"
              description="Are you sure to delete this task?"
              onConfirm={() => {
                confirm(record);
              }}
              onCancel={cancel}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  return (
    <div>
      <Button onClick={add} type="primary" style={{ width: '100px' }}>
        添加客服
      </Button>
      <Table
        pagination={{
          total: count,
          pageSize: 5,
          showQuickJumper: true,
        }}
        columns={columns}
        dataSource={newData}
      ></Table>
      <Modal title={title} open={isModalOpen} footer={null}>
        <Form
          name="basic"
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="客服名称"
            name="username"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default addTable(getPeoplelist)(People);
